<template>
    <div class="header-info">
        <el-descriptions class="margin-top" title="基本信息" :column="2" :size="size" border>
            
            <el-descriptions-item :labelStyle="style1" :contentStyle="contentStyle1">
                <template slot="label">
                    <i class="el-icon-userDo"></i>
                    试卷分类
                </template>
                
                {{ paper.paper_class }}
            </el-descriptions-item>
            
            <el-descriptions-item :labelStyle="style1" :contentStyle="contentStyle1">
                <template slot="label" :class="label">
                    <i class="el-icon-mobile-phone"></i>
                    试卷名称
                </template>
                {{ paper.name }}
            </el-descriptions-item>
            
            <el-descriptions-item :labelStyle="style1" :contentStyle="contentStyle1">
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                    试卷类型
                </template>
                固定试题
            </el-descriptions-item>
            
            <el-descriptions-item :labelStyle="style1" :contentStyle="contentStyle1">
                <template slot="label" :style="{width:'10px'}">
                    <i class="el-icon-office-building"></i>
                    试卷难度
                </template>
                {{ paper.difficulty }}
            </el-descriptions-item>
        </el-descriptions>
        <!--引入单选题模块-->
        <single-choice-module :single-choice-list="allSubject['type1']" :is-use="true"></single-choice-module>
        <!--        引入多选题模块-->
        <MultipleChoiceModule :subject-list="allSubject['type2']"></MultipleChoiceModule>
    </div>

</template>
<script>

import SingleChoiceModule from "@c/SingleChoiceModule";
import MultipleChoiceModule from "@c/MultipleChoiceModule";
import { Utils } from "@/utils/Util";

export default {
    name: "update",
    components: { MultipleChoiceModule, SingleChoiceModule },
    created() {
        // window.addEventListener("storage", this.initSubject, false);
        this.initSubject();
        let subject = this.paper.subject;
        // console.log("初始化题目::", subject);
        
        for (let i = 0; i < subject.length; i++) {
            let type = "type" + subject[i].type;
            // 将题目分类
            // let newVar = map.get(type);
            let newVar = this.allSubject[type];
            if (newVar == null) {
                newVar = [];
            }
            newVar.push(subject[i]);
            this.allSubject[type] = newVar;
            // map.set(type, arr);
        }
        // console.log("分类所有题目:", this.allSubject);
    },
    beforeDestroy() {
        // window.removeEventListener("storage", this.initSubject, false);
    },
    methods: {
        initSubject() {
            let parse = Utils.parseStorage("rowSubjectInfo");
            this.paper = parse == null ? this.paper : parse;
            // console.log("初始化试卷", this.paper);
        },
        setAnswer(subjectCode, answer) {
            this.answers[subjectCode] = answer;
        }
    },
    data() {
        return {
            size: "",
            label: "label-style",
            style1: {
                width: "150px"
            },
            answers: [],
            // 测试数据
            paper: {
                create_man: "undefined",
                create_time: "2021-12-15 17:37:16",
                difficulty: 1,
                id: 1,
                name: "测试12",
                paper_class: "语文",
                paper_grade: "初级",
                status: "正常",
                subject: [{
                    type: 1,
                    answer: "D",
                    options: {
                        A: "气愤",
                        B: "冷漠",
                        C: "快乐",
                        D: "悲伤"
                    },
                    content: "幸福的反义词是什么?"
                }, {
                    type: 2,
                    answer: "D",
                    options: {
                        A: "气愤",
                        B: "冷漠",
                        C: "快乐",
                        D: "悲伤"
                    },
                    content: "幸福的反义词是什么?"
                }],
                total_score: 100,
                update_time: "2021-12-20 00:01:15",
                use_count: 0
            },
            contentStyle1: {
                width: "300px"
            },
            allSubject: {}
        };
    }
};
</script>

<style lang="scss">
    body {
        counter-reset: subjectType;
    }
    
    .header-info {
        max-width: 85vw;
    }
    
    p.subject-type {
        &:before {
            counter-increment: subjectType;
            content: counter(subjectType) "、";
        }
        
        font-size: 1.2rem;
    }
    
    .label-style {
        width: 50px;
    }
</style>
